/**
 * @file 图片推荐
 * @author haitao
 */

(function () {
    window.nunjucks.configure({autoescape: true});
    var uploadPage = {
        init: function () {
            this.initUpload();
            this.initEvent();
        },
        selectId: 0,
        category_id: 0,
        canvas_id: 0,
        initEvent: function () {
            let self = this;
            $('body').on('click', '.image-delete', function () {
                $(this).parents('li').remove();
            });
            $('body').on('click', '.upload-image-data .dropdown-menu>div', function () {
                $(this).addClass('active').siblings().removeClass('active');
                // 弹一个框，添加链接
                if ($(this).attr('is_self') != 1) {
                    $('#image-link-txt').modal('show');
                    $(this).parents('li').find('.image-link').show();
                    $(this).parents('li').find('.select-original span').html('非原创');
                } else {
                    $(this).parents('li').find('.image-link').attr('url', '');
                    $(this).parents('li').find('.image-link').hide();
                    $(this).parents('li').find('.select-original span').html('原创');
                }
                let id = $(this).parents('li').attr('id');
                self.selectId = id;
            });
            $('.confirm-btn').on('click', function () {
                let url = $('#image-link-txt input').val();
                if (!url) {
                    $('#image-link-txt .warning').html('来源链接不能为空').fadeIn();
                    return;
                }
                if (!(url.indexOf('http://') > -1 || url.indexOf('https://') > -1)) {
                    url = 'http://' + url;
                }
                if (!/((https|http|ftp|rtsp|igmp|file|rtspt|rtspu):\/\/)(([a-zA-Z0-9\._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(\/[a-zA-Z0-9\&%_\./-~-]*)?/.test(url)) {
                    $('#image-link-txt .warning').html('来源链接格式不正确').fadeIn();
                    return;
                }
                $('#' + self.selectId).find('.image-link').attr('url', url).addClass('active');
                $('#image-link-txt').modal('hide');
                $('#image-link-txt input').val('');
            });
            $('.cancel-btn').on('click', function () {
                $('#' + self.selectId).find('.image-link').removeClass('active');
                $('#image-link-txt input').val('');
            });
            // 提示框不能为空
            $('#image-link-txt input').change(function () {
                let url = $(this).val();
                if (url) {
                    $('#image-link-txt .warning').hide();
                } else {
                    $('#image-link-txt .warning').fadeIn();
                }
            });
            $('body').on('click', '.image-link', function () {
                self.selectId = $(this).parents('li').attr('id');
                $('#image-link-txt').modal('show');
                let url = $(this).attr('url');
                $('#image-link-txt input').val(url);
                if (url) {
                    $(this).addClass('active');
                } else {
                    $(this).removeClass('active');
                }
            });
            $('.item-title').on('click', function (e) {
                e.stopPropagation();
                $(this).parent().toggleClass('active');
            });
            $('.category-content-item ul li').on('click', function () {
                self.canvas_id = $(this).attr('canvas-id');
                self.category_id = $(this).parents('.category-content-item').attr('category-id');
                $('.target-canvas span').html($(this).html());
                // $('.category-dropdown').dropdown('toggle');
            });
            // $('.target-canvas').on('click', function () {
            //     $('.category-dropdown').dropdown('toggle');
            // });
            $('.category-search input').keyup(function () {
                let search = $(this).val();
                if (search) {
                    $('.category-content-item').show().addClass('active');
                    $('.category-content-item .item-ul li').each(function () {
                        let html = $(this).html();
                        if (html.indexOf(search) > -1) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });
                    $('.category-content-item .item-ul').each(function () {
                        let length = $(this).find('li:visible').length;
                        if (length > 0) {
                            $(this).parents('.category-content-item').show();
                        } else {
                            $(this).parents('.category-content-item').hide();
                        }
                    });
                } else {
                    $('.category-content-item').show();
                    $('.category-content-item .item-ul li').show();
                    $('.category-content-item').removeClass('active');
                    $($('.category-content-item')[0]).addClass('active');
                }
            });
            // $('.category-dropdown .dropdown-menu').on('click', function (e) {
            //     e.stopPropagation();
            // });


            $('.save-btn').on('click', function () {
                let pwd = window.prompt("密码");
                let length = $('.recommend-content .upload-image-item').length;
                if (length <= 0) {
                    spop({
                        template: '请上传图片后，在提交',
                        style: 'warning',
                        autoclose: 2000,
                        position: 'top-center'
                    });
                    return false;
                }

                if (self.canvas_id === 0 || self.category_id === 0) {
                    spop({
                        template: '请选择要推荐的画板',
                        style: 'warning',
                        autoclose: 2000,
                        position: 'top-center'
                    });
                    return false;
                }

                // 获取数据
                let images = [];
                $('.recommend-content .upload-image-item').each(function () {
                    images.push({
                        class_id: self.canvas_id,
                        parent_class_id: self.category_id,
                        url: "http://resource.zhairuihao.show/" + $(this).attr('image-key'),
                        // origin: $(this).find('.image-link').attr('url'),
                        width: $(this).attr('width'),
                        height: $(this).attr('height')
                    });
                });
                $.ajax({
                    url: '/image/save/' + pwd,
                    type: 'post',
                    data: JSON.stringify(images),
                    success: function (data) {
                        console.log(data);
                        if (data.state === 'ok') {
                            location.href = '/1-6';
                        } else {
                            window.alert("密码错误")
                        }
                        // $('#success-dialog').modal('show');
                    },
                    error: function (jqxhr, textStatus, error) {
                        console.log("__失败__");
                    }
                });
            });
        },
        appendHtml: function (file, url) {
            // let = nunjucks.renderString('hello {{username}}',{username: 'leo'});
            let html = '<li id="' + file.id + '" class="upload-image-item">'
                + '<div class="upload-image">'
                + '<img src=""/>'
                + '</div>'
                + '<div class="upload-image-data">'
                + '<span class="fr image-delete">'
                + '<img src="' + window.staticUrl + '/assets/public/images/recommend/delete.svg"/>'
                + '</span>'
                + '</div>'
                + '<div class="progress-wrapper">'
                + '<div class="progress">'
                + '<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">'
                + '<span class="sr-only">40% Complete (success)</span>'
                + '</div>'
                + '</div>'
                + '<div class="progress-bar-txt">50%</div>'
                + '</div>'
                + '</li>';
            $('.recommend-content ul').append(html);
        },
        initUpload: function () {
            var Qiniu2 = new window.QiniuJsSDK();
            var uploader2 = null;
            var option2 = {
                filters: {
                    // 只允许上传图片和zip文件
                    mime_types: [{
                        title: 'Image files',
                        extensions: 'jpg,gif,png,jpeg'
                    }],
                    max_file_size: 1024 * 5 + 'kb', // 最大只能上传1M的文件
                    prevent_duplicates: true // 不允许选取重复文件
                },
                multi_selection: true,
                runtimes: 'html5,flash,html4', // 上传模式，依次退化
                browse_button: 'site-form-image-preview', // 上传选择的点选按钮，必需
                // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置
                // 切如果提供了多个，其优先级为uptoken > uptoken_url > uptoken_func
                // 其中uptoken是直接提供上传凭证，uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func
                // uptoken : '<Your upload token>', // uptoken是上传凭证，由其他程序生成
                uptoken_url: '/image/token', // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
                // uptoken_func: function(rs){    // 在需要获取uptoken时，该方法会被调用
                //    // do something
                //     console.log({rs})
                //    return rs.token;
                // },
                get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的uptoken
                // downtoken_url: '/downtoken',
                // Ajax请求downToken的Url，私有空间时使用，JS-SDK将向该地址POST文件的key和domain，服务端返回的JSON必须包含url字段，url值为该文件的下载地址
                // unique_names: true, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
                // save_key: true,                // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理
                domain: 'http://resource.zhairuihao.show', // bucket域名，下载资源时用到，必需
                container: 'upload-image-btn', // 上传区域DOM ID，默认是browser_button的父元素
                max_file_size: '5mb', // 最大文件体积限制
                flash_swf_url: '/static/web/plupload/Moxie.swf', // 引入flash，相对路径
                max_retries: 3, // 上传失败最大重试次数
                dragdrop: true, // 开启可拖曳上传
                drop_element: 'upload-image-btn', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                chunk_size: '4mb', // 分块上传时，每块的体积
                auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
                // x_vars : {
                //    查看自定义变量
                //    'time' : function(up,file) {
                //        var time = (new Date()).getTime();
                // do something with 'time'
                //        return time;
                //    },
                //    'size' : function(up,file) {
                //        var size = file.size;
                // do something with 'size'
                //        return size;
                //    }
                // },
                init: {
                    'FilesAdded': function (up, files) {
                        window.plupload.each(files, function (file) {
                            // 添加一个文件
                            uploadPage.appendHtml(file);
                            // 文件添加进队列后，处理相关的事情
                            var reader = new FileReader();
                            reader.readAsDataURL(file.getNative());
                            reader.onload = function (e) {
                                $('#' + file.id).find('.upload-image img').on('load', function () {
                                    $(this).parents('li').attr('width', this.naturalWidth);
                                    $(this).parents('li').attr('height', this.naturalHeight);
                                });
                                $('#' + file.id).find('.upload-image img').attr('src', e.target.result);
                            };
                        });
                    },
                    'BeforeUpload': function (up, file) {
                        // 每个文件上传前，处理相关的事情
                        $('#' + file.id + ' .progress-wrapper').show();
                        $('#' + file.id + ' .progress-wrapper').find('.progress-bar').css('width', 0);
                        $('#' + file.id + ' .progress-wrapper').find('.progress-bar-txt').html('0%');
                    },
                    'UploadProgress': function (up, file) {
                        // 每个文件上传时，处理相关的事情
                        // 某个文件正在上传
                        let width = file.percent + '%';
                        $('#' + file.id + ' .progress-wrapper').find('.progress-bar').css('width', width);
                        $('#' + file.id + ' .progress-wrapper').find('.progress-bar-txt').html(width);
                        if (file.percent === 100) {
                            $('#' + file.id + ' .progress-wrapper').hide();
                        }
                    },
                    'FileUploaded': function (up, file, info) {
                        // 每个文件上传成功后，处理相关的事情
                        // 其中info.response是文件上传成功后，服务端返回的json，形式如：
                        // {
                        //    'hash': 'Fh8xVqod2MQ1mocfI4S4KpRL6D98',
                        //    'key': 'gogopher.jpg'
                        //  }
                        var domain = up.getOption('domain');
                        var res = JSON.parse(info.response);
                        // var sourceLink = domain + '/' + res.hash; // 获取上传成功后的文件的Url
                        // $('#site-form-image-preview').attr('src', sourceLink);
                        $('#' + file.id).attr('image-key', res.hash);
                        up.removeFile(file);
                    },
                    'Error': function (up, err, errTip) {
                        // 上传出错时，处理相关的事情
                    },
                    'UploadComplete': function () {
                        // 队列文件处理完毕后，处理相关的事情
                        // $('.upload-loading').hide();
                        $('.progress-wrapper').hide();
                    },
                    'Key': function (up, file) {
                        // 这里也是一个关键的地方，如果你想自己定义文件名，就在这里组织，并 return key;
                        // 但是前提是你已经把 unique_names save_key 注释了，我这里是加了一个时间戳
                        // 这里是我定义的key,其实就是字符串拼接，如果你喜欢，return '123' 都可以
                        return undefined;
                    }
                }
            };
            uploader2 = Qiniu2.uploader(option2);
        }
    };
    uploadPage.init();
})();

